.conversation-message-wrapper {
  margin: 20px 0;

  .content-wrapper {
    display: flex;
    align-items: center;
    margin-top: 8px;
  }

  .message-layout {
    display: flex;

    .col-avatar {
      width: 50px;
      height: 50px;
      min-width: 50px;
      border-radius: 50%;
    }

    .col-content {
      display: flex;
      flex-direction: column;
    }

    &.position-left {
      .col-content {
        align-items: flex-start;
      }
    }

    &.position-right {
      flex-direction: row-reverse;

      .col-content {
        align-items: flex-end;
      }
    }

    &.position-center {
      justify-content: center;
    }
  }
}
